import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useMount, useSafeState } from 'ahooks';
import { ConfigProvider, Tabs } from 'antd';
import ErrorBoundary from 'antd/es/alert/ErrorBoundary';
import zhCN from 'antd/locale/zh_CN';
import { head } from 'lodash';
import { history, Outlet } from 'umi';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      staleTime: 0,
      refetchOnWindowFocus: false,
    },
    mutations: {
      retry: false,
    },
  },
});

const items = [
  {
    key: '/three',
    label: '3D',
  },
  {
    key: '/reptile',
    label: '爬虫',
  },
  {
    key: '/scroll',
    label: '滚动',
  },
  {
    key: '/clone',
    label: '克隆',
  },
  {
    key: '/storage',
    label: 'Storage',
  },
  {
    key: '/img2model',
    label: '图片生成模型',
  },
];

const Layout = () => {
  const [activeKey, setActiveKey] = useSafeState(head(items)?.key);
  const onChange = (key: string) => {
    history.push(key);
    setActiveKey(key);
  };

  useMount(() => {
    setActiveKey(history.location.pathname)
  });

  return (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary>
        <ConfigProvider locale={zhCN}>
          <Tabs activeKey={activeKey} items={[] || items} onChange={onChange} />
          <Outlet />
        </ConfigProvider>
      </ErrorBoundary>
    </QueryClientProvider>
  );
};

export default Layout;
